<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性和事件的绑定</title>
</head>

<body>
    <div id="app">
        <!-- 1.绑定属性 -->
        <h1 v-bind:title="msg2">娱乐圈很多瓜</h1>
        <!-- 快速复制 shift +alt + 下键 -->
        <h1 :title="msg2">娱乐圈很多瓜</h1>
        <!-- 注释代码 ctrl + / -->

        <img :src="url" alt="" style="width: 200px;"> <br>
        <!-- 2.绑定事件 -->

        <input type="button" value="-" @click="cut">
        <input type="text" name="" id="" :value="num">
        <input type="button" value="+" @click="add">

    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '考研和考编同时上岸怎么选',
            msg2: '法院判定王力宏李靓蕾离婚获准',
            url: 'https://img0.baidu.com/it/u=1494595992,2362718476&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500',
            num: 1
        },
        methods: { //书写方法的地方，就是实现交互功能的地方
            cut() {
                // alert('不知妻美，计时东')
                // this.num = 666;
                // this.num = this.num - 1;
                if (this.num <= 1) {
                    this.num = 1;
                    alert('最少购物买一份哦！');
                } else {
                    this.num = this.num - 1;
                }
            },
            add() {
                // alert('普信女，普信难，显眼包')
                // this.num = 999;
                // this.num = this.num + 1;
                if (this.num >= 10) {
                    this.num = 10;
                    alert('库存量到达上限，您最多可以买10份');
                } else {
                    this.num = this.num + 1;
                }

            }
        }
    })

    /*
        7-5上午：
         * 渲染数据
            -双花括号 {{}}
            - v-text
            - v-html
        * 绑定属性
            - v-bind
        * 绑定事件
            - @click
        7-5下午：
        * 判断 
            - v-if
            - v-show
        * 双向数据绑定
            - v-model
        * 循环
            - v-for
        

        学习方法：
            * 番茄学习：25分钟就休息5分钟。
            * 睡眠时间：90分钟 浅睡眠-深睡眠-浅睡眠
    */
</script>

</html>